//
//  ContentView.swift
//  Calculator
//
//  Created by uu on 2020/8/21.
//  Copyright © 2020 UU. All rights reserved.
//

import SwiftUI

struct ContentView: View {
    var body: some View {
        CalculatorButtonPad()
    }
}

/**
 面的代码可能无法编译，我们需要对此进行一些解释。ForEach 是 SwiftUI 中一个用来列举元素，并生成对应 View collection 的类型。它接受一个数组，且数组中的元素需要满足 Identifiable 协议。如果数组元素不满足 Identifiable，我们可以使用 ForEach(_:id:) 来通过某个支持 Hashable 的 key path 获取一个等效的元素是 Identifiable 的数组。在我们的例子中，数组 row 中的元素类型 CalculatorButtonItem 是不遵守 Identifiable 的。为了解决这个问题，我们可以为 CalculatorButtonItem 加上 Hashable，这样就可以直接用 ForEach(row, id: \.self) 的方式转换为可以接受的类型了。在 CalculatorButtonItem.swift 文件最后，加上一行：
 
 extension CalculatorButtonItem: Hashable {}
 在预览中，我们应该可以看到这一行按钮被正确渲染了。
 */

struct CalculatorButton: View {
    
    let fontSize: CGFloat = 38
    let title: String
    let size:CGSize
    let backgroundColorName: String
    let action:() -> Void
    
    var body: some View  {
        Button(action: action) {
            Text(title)
                .font(.system(size: fontSize))
                .foregroundColor(.white)
                .frame(width: size.width, height: size.height)
                .background(Color(backgroundColorName))
                .cornerRadius(size.width / 2)
        }
    }
    
}


struct CalculatorButtonRow: View {
    let row: [CalculatorButtonItem]
    var body: some View {
        HStack {
            ForEach(row, id: \.self) {item in
                CalculatorButton (
                    title: item.title,
                    size: item.size,
                    backgroundColorName: item.backgroundColorName)
                {
                    print("hello hahahah")
                }
            }
        }
    }
}


struct CalculatorButtonPad: View {
    let pad: [[CalculatorButtonItem]] =
        [[.command(.clear), .command(.flip), .command(.percent), .op(.divide)],
        [.digit(7), .digit(8), .digit(9), .op(.multiply)],
        [.digit(4), .digit(5), .digit(6), .op(.minus)],
        [.digit(1), .digit(2), .digit(3), .op(.plus)],
        [.digit(0), .dot, .op(.equal)]]
    
    var body: some View {
        VStack(spacing: 8) {
            ForEach(pad, id: \.self) {row in
                CalculatorButtonRow(row: row)
            }
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}
